<template>
  <div>
    <el-divider content-position="left" v-if="memo">{{ memo }}</el-divider>
    <el-row>
      <el-col :span="8" v-for="(meta, _index) in metas" :key="_index">
        <form-item
          :formData="currentFormData"
          v-model="currentFormData[meta.name]"
          :meta="meta"
          :dictListFun="meta.dictListFun"
        ></form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FormItem from "./form-item.vue";

export default {
  components: { FormItem },
  props: {
    memo: {
      type: String,
    },
    metas: {
      type: Array,
      require: true,
    },
    formData: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      currentFormData: this.formData,
    };
  },
  watch: {
    formData: {
      deep: true,
      async handler(newFormData) {
        Object.assign(this.currentFormData, newFormData);
      },
    },
    currentFormData: {
      deep: true,
      handler() {
        this.$emit("update:formData", {
          ...this.formData,
          ...this.currentFormData,
        });
      },
    },
  },
};
</script>

<style scoped></style>
